<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类的操作</title>
    <style>
        .b1{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
        }
        .b2{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function () {
            var btn01=document.getElementById("btn01");
            var box1=document.getElementById("box1");
            btn01.onclick=function () {
                // box1.className="b2";//我们可以修改class属性来间接的修改box1的样式
                // addClass(box1,"b2");
                // removeClass(box1,"b2");
                toggleClass(box1,"b2");
            }
        };
        //定义一个函数 用来向一个元素添加指定的class属性值
                //参数  obj 要添加class属性的元素
                //      cn 要添加的class属性
        function addClass(obj,cn) {
            if (!hasClass(obj,cn)){
                obj.className+=" " +cn; //判断obj 中是否含有cn
            }
        }
        //判断一个元素中是否有指定的class属性
                //参数 obj 要判断class属性的元素
                //    cn 要判断的class属性
        function hasClass(obj,cn) {
            //判断obj中有没有cn
            var reg=new RegExp("\\b"+cn+"\\b");
             return reg.test(obj.className)
        }
        //删除一个元素中的指定的class属性
        function removeClass(obj,cn) {
            var reg=new RegExp("\\b"+cn+"\\b");
            //删除class
            obj.className=obj.className.replace(reg,"")
        }
        //toggleClass可以用来切换一个类
        // 如果元素中有 则删除 如果没有则添加
        function toggleClass(obj,cn) {
            if (hasClass(obj,cn)){
                removeClass(obj,cn)
            }else {
                addClass(obj,cn);
            }
        }
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后修改box1的样式</button>
    <br /><br />
    <div id="box1" class="b1 b2"></div>
</body>
</html>